<template>
<div class="show" :class="myclass">
    <bannerPage :boole="boole"></bannerPage>
    <div class="show_box" v-for="(v, index) in showarr" :key="index" @click="goDetail1(v)">
        <img :src="v.img1" alt="">
        <div class="showBox">
            <p>{{ v.proname }}</p>
            <div class="showspan">
                <span>￥{{ v.originprice }}</span>
                <span>{{ v.sales }}+人已购买</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import bannerPage from './bannerPage.vue'
export default {
    data() {
        return {
            showarr: [],
            num:21
        }
    },
    props: ["boole", "myclass","count"],
   
    components:{
        bannerPage
    },
    mounted() {
        this.$http({
            url:"http://118.178.238.19:3001/api/pro/search",
            method:"get",
            
            params:{
                count: this.count,
                limitNum: this.num
            }
        }).then(res=>{
            this.showarr = res.data.data
        })

        this.$bus.$on("transmit", (v) => {
            // console.log(v);
            this.showarr = v;
        });
      
    },
    methods:{
        goDetail1(v) {
            // sessionStorage.setItem('objLike', JSON.stringify(v))

            this.$router.push({
                path: '/detail',
                query: {
                    delList: JSON.stringify(v)  
                }
            })
        }
        // todetail(v){
        //     this.$router.push({
        //         path:'/detailPage',
        //         query: { data: JSON.stringify(v)}
        //     })
        // }
    }
}
</script>


<style scoped>
html,body{
    font-size: 50px;
}
.show {
    width: 96%;
    height: auto;
    margin: 0.2rem 2%;
    box-sizing: border-box;
    column-count: 2;
}
.newBgc{
    width: 100%;
    margin: 0.2rem 0;
}
.show .show_box {
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    border-radius: .2rem;
    margin-bottom: .2rem;
    overflow: hidden;
}
.show_box img{
    width: 100%;
    height: 100%;
}
.show_box .showBox {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: .2rem;
}

.show_box p {
    font-size: .26rem;
    color: #434343;
    line-height: .4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.showspan{
    width: 100%;
    display: flex;
    align-items: center;
}
.showspan span:nth-child(1) {
    font-size: .28rem;
    color: #FF5500;
}
.showspan span:nth-child(2) {
    display: block;
    height: .32rem;
    margin-left: .2rem;
    font-size: .24rem;
    color: #999999;
    white-space: pre-line;
    overflow: hidden;
}
</style>